<template>
<div class="all">
  <header>
    <div class="div">
      <img src="../../../assets/fff返回.png" @click="back()" alt="">
      <span  @click="back()">返回</span>
    </div>
    <div class="div">
      <span>团队主页</span>
    </div>
    <div class="div">
    </div>
  </header>
  <div class="all1">
    <div class="boxInfo">
      <ul class="TeamInfoUL">
        <li class="InfoLeft">
          <img v-if="TeamInfo.team_icon !== null && TeamInfo.team_icon !== undefined && TeamInfo.team_icon !== ''" :src="TeamInfo.team_icon" class="photo" alt="">
          <img v-else src="../../../assets/男医生@2x.png" class="photo" alt="">
        </li>
        <li class="InfoRight">
          <p class="fontSize15" style="font-weight: bold">{{TeamInfo.team_name}}</p>
          <p class="fontSize13">{{TeamInfo.NICK_NAME}} <button class="tagTuandui">团队长</button></p>
          <p class="fontSize13">
            <a >{{TeamInfo.MAJOR}}</a>
            <a >|</a>
            <a >{{TeamInfo.DEPART}}</a>
          </p>
          <p class="hospital">
            {{TeamInfo.HOSPITAL_NAME}}
            <span class="biaoqian" style="color: #FFFFFF!important;">{{TeamInfo.GRADE}}</span>
          </p>
        </li>
<!--        <li class="TeamInfoRight" v-show="topActive == 0 || topActive == 1" @click="runCode()">-->
<!--          <img src="../../assets/二维码.png" alt="">-->
<!--          &lt;!&ndash;            <span>扫一扫</span>&ndash;&gt;-->
<!--          &lt;!&ndash;            <span>{{TeamInfo.team_name}}二维码</span>&ndash;&gt;-->
<!--        </li>-->
      </ul>
      <div class="divMenu" style=" border-radius: 10px 10px 0 0;
  margin-top: 10px;">
        <ul @click.stop="lookTeam()">
          <li>{{TeamInfo.count}}人</li>
          <li>团队成员</li>
        </ul>
        <ul >
          <li>{{TeamInfo.huanzheSize ? TeamInfo.huanzheSize + '个' : '暂无'}}</li>
          <li>接受服务</li>
        </ul>
        <ul @click="clickPrice">
          <li>{{TeamInfo.size ? TeamInfo.size + '项' : '暂无'}}</li>
          <li>提供服务</li>
        </ul>
      </div>
      <div class="divMenu">
        <ul>
          <li>{{TeamInfo.jiezhenCount ? TeamInfo.jiezhenCount  : '暂无'}}</li>
          <li>接诊率
          </li>
        </ul>
        <ul >
          <li>{{TeamInfo.haopingLv ? TeamInfo.haopingLv  : '暂无'}}</li>
          <li>好评率
          </li>
        </ul>
        <ul >
          <li>{{TeamInfo.zixunCount ? TeamInfo.zixunCount : '暂无'}}</li>
          <li>咨询量
          </li>
        </ul>
      </div>
    </div>
    <div class="goodDivAll">
      <div class="goodDiv">
        <img src="../../../assets/图文介绍.png" class="tuwenImg" alt="">
        <span class="goodText">
              <a >团队简介：</a>
              <a >{{TeamInfo.team_intro}}</a>
            </span>
      </div>
<!--      <div class="goodDiv">-->
<!--        <img src="../../../assets/图文擅长.png" class="tuwenImg" alt="">-->
<!--        <span class="goodText">-->
<!--              <a style="">团队擅长：</a>-->
<!--              <a >-->
<!--                {{TeamInfo.team_goodat}}-->
<!--              </a>-->
<!--            </span>-->
<!--      </div>-->
    </div>
  </div>
  <van-collapse v-model="activeNames" accordion>
    <van-collapse-item
      style='margin-top:5px' title="标题1" name="1">
      <template #title>
        <div class="title_all" >
          <a class="hengGang"></a>
          <strong>我的功能</strong>
        </div>
      </template>
      <div class="CommonFunctions">
        <div  v-for="(item, index) in menuList" :key="index" @click="clickUse(item)">
          <img :src="item.icon" alt="">
          <span>{{item.name}}</span>
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>
</div>
</template>

<script>
export default {
  name: 'PatientsLookTeam',
  data () {
    return {
      userid: this.$route.query.userid,
      TeamInfo: [],
      team_id: this.$route.query.team_id,
      teamDoctorList: [],
      TeamLeader: '',
      activeNames: '1',
      menuList: [
        {
          name: '个人计划',
          icon: require('../../../assets/team/pingdingguanli.png'),
          icon_hui: require('../../../assets/team/pingdingguanli -hui.png'),
          path: '/PatientsTable',
          query: {
            userid: this.userid,
            team_id: this.team_id,
            patient_user_id: '#'
          }
        }, {
          name: '团队排班',
          icon: require('../../../assets/team/tuanduigonggao.png'),
          icon_hui: require('../../../assets/team/tuanduigonggao-hui.png'),
          path: '/PatientsTable',
          query: {
            userid: this.userid,
            team_id: this.team_id,
            patient_user_id: ''
          }
        },
        {
          name: '图文咨询',
          icon: require('../../../assets/team/tuwenzixun.png'),
          icon_hui: require('../../../assets/team/tuwenzixun-hui.png'),
          path: '/tuWenHome',
          type: '1'
        },
        {
          name: '视频咨询',
          icon: require('../../../assets/team/shipinzixun.png'),
          icon_hui: require('../../../assets/team/shipinzixun-hui.png'),
          path: '/tuWenHome',
          type: '2'
        },
        {
          name: '远程会诊',
          icon: require('../../../assets/team/yuancehnghuizhen.png'),
          icon_hui: require('../../../assets/team/yuancehnghuizhen-hui.png'),
          path: '/tuWenHome',
          type: '5'
        },
        // {
        //   name: '居家康复',
        //   icon: require('../../../assets/team/jujiakangfu.png'),
        //   icon_hui: require('../../../assets/team/jujiakangfu-hui.png'),
        //   path: '/recure',
        //   type: 0
        // },
        // {
        //   name: '居家护理',
        //   icon: require('../../../assets/team/jujiahuli.png'),
        //   icon_hui: require('../../../assets/team/jujiahuli-hui.png'),
        //   path: '/recure',
        //   type: 1
        // },
        // {
        //   name: '居家生活',
        //   icon: require('../../../assets/team/jujiashenghuo.png'),
        //   icon_hui: require('../../../assets/team/jujiashenghuo-hui.png'),
        //   path: '/recure',
        //   type: 2
        // },
        // {
        //   name: '居家养老',
        //   icon: require('../../../assets/team/jujiayanglao.png'),
        //   icon_hui: require('../../../assets/team/jujiayanglao-hui.png'),
        //   path: '/recure',
        //   type: 3
        // }
        {
          name: '居家康复',
          icon: require('../../../assets/team/jujiakangfu.png'),
          icon_hui: require('../../../assets/team/jujiakangfu-hui.png'),
          path: '/JuJia',
          type: 3
        },
        {
          name: '居家护理',
          icon: require('../../../assets/team/jujiahuli.png'),
          icon_hui: require('../../../assets/team/jujiahuli-hui.png'),
          path: '/JuJia',
          type: 4
        },
        {
          name: '居家生活',
          icon: require('../../../assets/team/jujiashenghuo.png'),
          icon_hui: require('../../../assets/team/jujiashenghuo-hui.png'),
          path: '/JuJia',
          type: 7
        },
        {
          name: '居家养老',
          icon: require('../../../assets/team/jujiayanglao.png'),
          icon_hui: require('../../../assets/team/jujiayanglao-hui.png'),
          path: '/JuJia',
          type: 8
        },
        {
          name: '团队通讯录',
          icon: require('../../../assets/team/jujiayanglao.png'),
          icon_hui: require('../../../assets/team/jujiayanglao-hui.png'),
          path: '/TeamChatnew',
          type: 9
        }
      ]
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.team_id = this.$route.query.id
    }
    // 获取团队信息和成员
    this.getTeamDetail()
  },
  methods: {
    // 点击功能
    clickUse (item) {
      if (item.path == '#') {
        this.$toast('正在开发中，敬请期待...')
        return false
      } else if (item.query) {
        let patient_user_id = ''
        if (item.query.patient_user_id && item.query.patient_user_id == '#') {
          patient_user_id = item.query.patient_user_id = this.userid
        }
        this.$router.push({path: item.path,
          query: { userid: this.userid,
            team_id: this.team_id,
            patient_user_id: patient_user_id,
            title: item.name
          }})
      } else {
        this.$router.push({path: item.path,
          query: {
            userid: this.userid,
            team_id: this.team_id,
            type: item.type
          }})
      }
    },
    // 点击 服务价格
    clickPrice () {
      this.$router.push({path: '/TeamSevices', query: {userid: this.userid, isAll: 1, team_id: this.team_id}})
    },
    lookTeam () {
      this.$router.push({
        path: '/TeamMembers',
        query: {id: this.team_id,
          TeamLeader: this.TeamLeader,
          team_id: this.team_id,
          userid: this.userid}
      })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    getTeamDetail () {
      this.$http.Teamdetail({id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.TeamInfo = res.data.data
            this.TeamLeader = res.data.data.USER_ID
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style  scoped>

.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.all1{
  width: 100%;
  background: #1DA4F2;
}
.colorBlue{
  color: #1da4f2;
}
.fontSize11{
  font-size: 11px;
}
.fontSize13{
  font-size: 13px;
}
.fontSize15{
  font-size: 15px;
}
.fontSize17{
  font-size: 17px;
}
.fontWeightBlod{
  font-weight: bold;
}
header,
.biaoqian,
.hospital,
.divMenu ul li,
.title,
.label span,
.teamList ul li{
  display: flex;
  align-items: center;
}
header{
  width: 100%;
  height: 44px;
  font-family: "PingFang SC";
  color: white;
  position: sticky;
  top: 0;
  background: #1da5f2;
  z-index: 99;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  margin: 0 5px 0 15px;
}
.div:nth-child(1) img,
.imgMore{
  width: 7px;
  height: 13px;
}
.imgMore{
  margin-left: 5px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.boxInfo{
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding:  15px 15px 0 15px;
  box-sizing: border-box;
}
.TeamInfoUL{
  display: flex;
}
.InfoLeft{
  width: 20%;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
}
.InfoLeft span{
  display: flex;
  align-items: center;
  justify-content: center;
}
.InfoLeft img{
  margin-top: 10px;
}
.photo{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.InfoRight{
  width: 65%;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  margin-left: 8px;
  /*justify-content: space-around;*/
}
.TeamInfoRight{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 13px;
}
.TeamInfoRight img{
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.TeamInfoRight span{
  text-align: center;
}
.tagTuandui{
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #F9BD77, #FFED91);
  border-radius: 19px;
  border: none;
  color: #A8610B;
  margin-left: 10px;
}
.InfoRight p {
  min-height: 25px;
  /*margin-top: 10px;*/
}
.box p{
  min-height: 30px;
  color: white;
}

.biaoqian{
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  box-sizing: border-box;
  background: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid #fff;
  font-size: 11px;
  margin-left: 8px;
  justify-content: center;
}

.hospital{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.divMenu{
  width: 100%;
  display: flex;
  background: rgba(255, 255, 255, 0.2);
  /*margin: 10px auto;*/
  /*border-radius: 10px;*/
}
.divMenu:last-child{
  border-radius:  0 0 10px 10px ;
  margin-bottom: 10px;
}
.divMenu ul{
  width: 33%;
  padding: 10px 0;
  box-sizing: border-box;
}
.divMenu ul li:nth-child(1) {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
}

.divMenu ul li{
  width: 100%;
  height: 20px;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.goodDivAll{
  background: white;
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}
.goodDiv{
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 8px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  display: flex;
  /*align-items: center;*/
}
.tuwenImg{
  width: 22px;
  height: 22px;
  margin-right: 3px;
}
.goodText{
  display: flex;
}
.goodText a{
  display: block;
}
.goodText a:nth-child(1){
  white-space: nowrap;
}
.label{
  justify-content: space-between;
}
.title{
  width: 100%;
  height: 44px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-top: 5px;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}

.overText{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .van-collapse-item__content {
  padding: 0;
}
</style>
<style lang="scss" scoped>
$Theme-color: #1da4f2;
$font-size15: 15px;
$font-size13: 13px;
$font-size11: 11px;
%flex-all{
  display: flex;
  align-items: center;
}
%flexAll {
  display: flex;
  align-items: center;
}
.all {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
  font-size: 15px;
}

header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 9;
  //background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  color: #FFFFFF;
}
.top{
  width: 100%;
  color: #FFFFFF;
  background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 0 0 10px 10px;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}

.div img {
  margin-right: 5px;
}

.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}

.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}

.div:nth-child(3) span {
  margin-right: 15px;
}

.div:nth-child(2) {
  justify-content: center;
}

.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: $Theme-color;
}
.slide-fade-enter-active {transition: all .2s ease;}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-fade-enter, .slide-fade-leave-to{transform: translatey(5px);opacity: 0;}
.infoList{
  display: flex;
  //padding-top: 10px;
  box-sizing: border-box;
  .infoDiv{
    display: flex;
    align-content: space-between;
    flex: 1;
    ul{
      li{
        //line-height: 25px;
        margin-bottom: 5px;
      }
      li:nth-child(3) {
        font-size: $font-size13;
      }
    }
    p{
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .teamInfo{
    border-right: 1px solid #fff;
  }
  .loginInfo{
  }
  .codeImg{
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
  }
  .tag{
    min-width: 50px;
    padding: 3px 8px;
    box-sizing: border-box;
    //height: 25px;
    border-radius: 9px;
    font-size: $font-size11;
  }
  .teamTag{
    background: linear-gradient(90deg, #F9BD77, #FFED91);
  }
  .loginTag{
    background: #fff;
    color: $Theme-color;
  }
}
.shrink{
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #005489;
  margin: 10px auto;
  img{
    width: 15px;
    height: 15px;
    margin-left: 8px;
  }
}
.divMenu{
  width: 100%;
  display: flex;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  ul{
    width: 33%;
    padding: 10px 0;
    box-sizing: border-box;
    li:nth-child(1) {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fff;
    }
    li{
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: center;
      color: #fff;
      font-size: 13px;
    }
  }
}
.photo{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin: 8px;
}
.title{
  width: 100%;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  line-height: 44px;
  margin-top: 5px;
  @extend %flex-all;
}
.title_all{
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  @extend %flex-all;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 16px;
  background: #1DA4F2;
  margin-right: 5px;
}

.overText{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.CommonFunctions{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  color: #333333;
  border: 1px solid #E5E5E5;
  //border-top: 1px solid #E5E5E5;
  //border-bottom: 1px solid #E5E5E5;
  img{
    width: 22px;
    height: 22px;
    margin-left: 20%;
    margin-right: 5px;
  }
  div {
    width: 50%;
    min-height: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
    font-size: 15px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #E5E5E5;
    margin-top: -1px;
    margin-bottom: -1px;
    &:nth-child(odd){
      border-right: 1px solid #E5E5E5;
    }
  }
}
.textOVerFive {
  width: 90%;
  margin: 0 auto;
  display: block;
  -webkit-line-clamp:5;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow:hidden;
  text-overflow:ellipsis;
}
/deep/ .van-cell{
  font-size: 15px;
}
</style>
